<template>
  <div class="leftAside">
    <el-avatar
      shape="square"
      :size="62"
      src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
    ></el-avatar>
    <el-menu
      :default-active="acticon"
      router
      class="el-menu-vertical-demo"
      collapse
      @select="selectNav"
    >
      <el-menu-item index="/">
        <i class="el-icon-pie-chart"></i>
        <span slot="title"> 首页 </span>
      </el-menu-item>
      <el-menu-item index="Calendar">
        <i class="el-icon-date"></i>
        <span slot="title"> 日程表 </span>
      </el-menu-item>
      <el-menu-item index="Project">
        <i class="el-icon-menu"></i>
        <span slot="title">项目列表</span>
      </el-menu-item>
      <el-menu-item index="Task">
        <i class="el-icon-document"></i>
        <span slot="title">任务列表</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      acticon: "",
    };
  },
  mounted() {
    // console.log(this.$route);
    // this.acticon = this.$route.path === "/" ? "/" : this.$route.path.slice(1);
    window.sessionStorage.setItem("nav", "/");
    this.acticon = window.sessionStorage.getItem("nav");
  },
  methods: {
    selectNav(index) {
      window.sessionStorage.setItem("nav", index);
    },
  },
};
</script>
<style scope>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 12.5rem;
  min-height: 25rem;
}

.leftAside {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-image {
  margin-bottom: 1rem;
}
.el-menu {
  position: relative;
}
/* @keyframes tbfloat {
  0% {
    top: 0rem;
    left: 0rem;
  }
  25% {
    left: -0.2rem;
  }
  50% {
    top: 1rem;
  }
  75% {
    left: 0.2rem;
  }
  100% {
    top: 0rem;
    left: 0rem;
  }
} */
</style>
